<template>
	<view class="wrap">
		<view class="banner">
			<image  :src="pageData.cover" mode=""></image>
		</view>
		
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === item.state}"
				@click="tabClick(item.state)"
			>
				{{item.text}}
			</view>
		</view>
		
		<view class="show-desc-index" v-if="tabCurrentIndex==1">
			{{pageData.sell}}
		</view>
		
		
		<view class="sel-wrap" v-if="tabCurrentIndex==2">
			<radio-group @change="radioChange">
							<label style="position:relative;" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
								<text @click="enteraddress"  v-show="index==0" class="yticon icon-you"></text>
								<view>
									<radio :value="item.value" :checked="item.value == selindex" />
								</view>
								<view >{{index==0?(nowaddress.detailed_address.length>13?nowaddress.detailed_address.substring(0,13)+'...':nowaddress.detailed_address):item.name}}
								
								</view>
							</label>
						</radio-group>
		</view>
		
		<view class="page-bottom">
			<view class="note-wrap">
				<view class="note-item" v-for="(item,index) in pageData.note" :key="index">
					{{item}}
				</view>
			</view>
			
			<view class="sub-wrap">
				<view class="left">
					
					<text>
						总金额：<text class="money">￥ {{pageData.price}}</text>
					</text>
				</view>
				
				<view class="right" @click="nextpage">
					支付
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import { mapState, mapActions, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				selindex:'邮寄',	
				items:[{
					value:'邮寄',
					name:'邮寄'
				},{
					value:'自提',
					name:'自提',
				}],
				tabCurrentIndex:1,
				navList:[
					{
						text:'代卖',
						state:1
					},{
						text:'提货',
						state:2
					}
				],
				id:'',
				amount:0,
				giveAmount:0,
				pageData:{
					
					note:[]
				},
				
			}
		},
		onLoad(options) {
			this.id=options.id
             this.geData()  
		},
		computed: { //computed中注册
			...mapState([
				'nowaddress',
				'tihuoren','zitidian'
			])
		},
		methods: {
			...mapMutations(['setnewaddress']),
			enteraddress(){
				uni.navigateTo({
				    url: `/pages/shopwrap/shopaddress`
				});
				
			},
			radioChange(e){
				this.selindex=e.detail.value
				
			},
			tabClick(tabCurrentIndex){
				this.tabCurrentIndex=tabCurrentIndex
			},
			changeminimum(on){
				if(on){
					let num=this.amount+this.pageData.multiple
					
					if(num>this.pageData.highest){
						uni.showToast({
							icon: 'none',
							duration:4000,
							title: '不能大于'+this.pageData.highest
						});
					}else{
						
						//this.giveAmount=Number(this.pageData.give)*Number(num)
						this.amount=num
					}
					
					
				}else{
					let num=this.amount-this.pageData.multiple
					if(num<this.pageData.minimum){
						uni.showToast({
							icon: 'none',
							duration:4000,
							title: '不能小于'+this.pageData.minimum
						});
					}else{
						//this.giveAmount=Number(this.pageData.give)*Number(num)
						this.amount=num
					}
					
				}
			},
			nextpage(){
				console.log(this.selindex)
				this.pageData.address_id=this.selindex=='自提'?null:this.nowaddress.id
				this.pageData.type=this.tabCurrentIndex
				this.pageData.page='zengzhiquan'
				
				let pageDatastr=JSON.stringify(this.pageData)
				uni.navigateTo({
				    url: `/pages/fenxiaoshanglist/index?data=`+pageDatastr
				});
				return
				
				if(this.pageData.is_sign){
					let pageDatastr=JSON.stringify(this.pageData)
					uni.navigateTo({
					    url: `/pages/money/pay?data=`+pageDatastr
					});
				}else{
					uni.navigateTo({
					    url: '/pages/gupiaoqianyue/index'
					});
				}
				
			},
			chooseImg(type){
				
				let that=this
				
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (res) => {
						const imgsFile=res.tempFilePaths
						uni.showLoading({
						    title: '正在上传'
						});
						const uper=uni.uploadFile({
							url: that.upUrl+'/api/user/upimg_stock_sign',
							filePath:imgsFile[0],
							name:'img',
							header:{  
								"Authorization": uni.getStorageSync("auth_token")
							},
							success:function(res){
								
								
								let data=JSON.parse(res.data)
								if(data.Code=='10200'){
									
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration:4000,
									});
									uni.hideLoading();
									that[type]=data.Data
									
									
									
								}
							}
						})
						//上传进度更新的方法
						// uper.onProgressUpdate((e)=>{
						// 	if(e.progress==100){
								
								
						// 	}else{
								
						// 	}
							
						// })
					}
				})
			
			},
			geData(){
				let that=this
				that.apiget('/api/home/get_stock_info',{
					id:that.id
				}).then(res => {
					if(res.Code==10200){
						that.pageData=res.Data
						that.setnewaddress(res.Data.pick_up.address)
						that.items[1].name=res.Data.pick_up.pick_shop
						that.items[0].name=that.nowaddress.detailed_address
						uni.setNavigationBarTitle({
								title: res.Data.title
						});

						that.amount=res.Data.minimum
						//that.giveAmount=Number(that.pageData.give)*Number(that.amount)
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			subData(){
				let that=this
				if(this.name==''){
					uni.showToast({
					    title: '请输入真实姓名',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.id_card==''){
					uni.showToast({
					    title: '请输入身份证号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.phone==''){
					uni.showToast({
					    title: '请输入手机号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.bankcard==''){
					uni.showToast({
					    title: '请输入银行卡号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.front_card==''){
					uni.showToast({
					    title: '请上传身份证正面',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.back_card==''){
					uni.showToast({
					    title: '请上传身份证反面',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
			    
				
				
				
				
				that.apipost('/api/user/submit_stock_sign',{
					bankcard:that.bankcard,
					id_card:that.id_card,
					name:that.name,
					front_card:that.front_card,
					back_card:that.back_card,
					phone:that.phone
					
					
				},true).then(res => {
					if(res.Code==10200){
						
						uni.showToast({
						    title: res.Message,
						    duration:4000,
							icon:'none'
						});
						
					}
					
				}).catch(err=>{
					console.log(err)
				});
			}
		}
	}
</script>

<style lang='scss'>
	.uni-list-cell-pd {
		
		padding-left: 22rpx;
		height:60px;
		border-bottom:1rpx solid #f7f7f7;
		
		
		box-sizing: border-box;
		display: flex;
		height: 60px;
		font-size:36rpx;
		width:656rpx;
		margin:6rpx auto;
		margin-top:22rpx;
		border-radius:14rpx;
		
		align-items: center;
		background: #fff;
	}
	uni-radio-group{
		width:100%;
	}
	.uni-list-cell{
		width:100%;
	}
	.sel-wrap{
		box-sizing: border-box;
		display: flex;
		
		width:656rpx;
		margin:6rpx auto;
		margin-top:22rpx;
		border-radius:14rpx;
		
		
		background: #fff;
		
	}
	.banner uni-image{
		border-radius:22rpx;
	}
	.page-bottom{
		position:fixed;
		width:100%;
		bottom:80rpx;
	}
	.sub-wrap .left .money{
		color:#fe0600;
		
		align-items: center;
	}
	.sub-wrap .left{
		padding-left:40rpx;
		flex:1;
		height:94rpx;
		background:#fff;
		display:flex;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		align-items: center;
	}
	.sub-wrap .right{
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		color:#fff;
		width:214rpx;
		height:94rpx;
		background:#ff2823;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.sub-wrap{
		
		display:flex;
		justify-content: space-between;
		
		width:656rpx;
		margin:0 auto;
		margin-top:70rpx;
	}
	.note-wrap{
		width:656rpx;
		margin:0 auto;
		padding-top:50rpx;
	}
	.num-wrap .item-list .content .jia{
		margin-left:10rpx;
		background:url(/static/jiabg.png) no-repeat center;
		background-size:100% 100%;
		height:42rpx;
		width:42rpx;
		display: flex;
		justify-content: center;
		
		align-items: center;
		font-size:40rpx;
	}
	.num-wrap .item-list .content .jian{
		margin-left:40rpx;
		font-size:40rpx;
		height:42rpx;
		width:42rpx;
		display: flex;
		justify-content: center;
		background:url(/static/jianbg.png) no-repeat center;
		background-size:100% 100%;
		align-items: center;
	}
	
	.num-wrap .item-list .content{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.num-wrap .item-list{
		display: flex;
		font-size:32rpx;
		border-bottom:1rpx solid #ededed;
		justify-content: space-between;
		height:134rpx;
		align-items: center;
	}
	.num-wrap{
		border-radius:10rpx;
		width:656rpx;
		margin:0 auto;
		padding:0 40rpx;
		box-sizing: border-box;
		background:#fff;
		margin-top:48rpx;
	}
	.title{
		height:90rpx;
		display:flex;
		justify-content: center;
		align-items: center;
		
	}
	page{
		background:#eee;
	}
	.wrap{
		padding-top:25rpx;
		background:#eee;
		
	}
	.banner{
		margin:0 auto;
		width:656rpx;
		height:360rpx;
	}
	
	
	.show-desc-index{
		box-sizing: border-box;
		display: flex;
		height: 60px;
		font-size:36rpx;
		width:656rpx;
		margin:6rpx auto;
		margin-top:22rpx;
		border-radius:14rpx;
		justify-content: center;
		align-items: center;
		background: #fff;
	}
	.icon-you {
		position:absolute;
		top:22px;
		right:7rpx;
		font-size: 32rpx;
		color: $font-color-light;
		margin-right: 30rpx;
	}
	.navbar{
		box-sizing: border-box;
		display: flex;
		height: 40px;
		
		width:656rpx;
		margin:6rpx auto;
		margin-top:22rpx;
		border-radius:14rpx;
		padding:12rpx 20rpx;
		
		background: #f7f7f7;
		
		position: relative;
		z-index: 10;
		
		.nav-item{
			border-radius: 14rpx;
			
			flex: 1;
			
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			
			&.current{
				
				background:#fff;
				color: $base-color;
			}
		}
	}
	
</style>
